<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>二级下拉菜单</title>
  <script src="../js/jquery-1.10.1.min.js"></script>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="car-model">
  <h1>一级下拉</h1>
  <select name="yijiID" id="yijiID">
    <!-- <option value="-1">请选择</option> -->
    <option value="-1">全部车型</option>
    <!-- //问题!!!!!!!!!!!!：第一个option，获取不到数据和id -->
    <option value="21">车型一</option>
    <option value="32">车型二</option>
    <option value="345">车型三</option>
    <option value="56">车型四</option>
  </select>
  <script>
  // jq的on change时间，
  // $(this).val(): 可以获取当前选择的数据的 id
  // $('select本身 option:selected').text(): 获取选中那一条的值
    $('#yijiID').on('change',function(){
      console.log($(this).val()+$('#yijiID option:selected').text())
    })
    $('body').on('click',function(){
      console.log($('#yijiID option:selected').text())
    })
  </script>
  <h1>二级下拉</h1>
  <style>
    .first-level{
      position: relative;
    }
    .jxs-drop-layer{
      max-height: 160px;
      overflow-y: scroll; /*//问题!!!!!!!!!!!!设置了超出隐藏后，二级的结构就看不到了！*/
      display: none;
      background: #c3ebff;
      padding: 10px 0 0;
      background: #ffffff;
      padding: 10px 0 0;
      border: 1px solid #f1f1f1;
      box-shadow: 1px 1px 1px #eee;
    }
    .mr5{
      display: block;
      padding: 5px 10px;
      border: 1px solid green;
    }
    .first-level{
      min-height: 28px;
    }
    .yiji-a{
      /*width: 90px;*/
      padding: 10px 10px;
      /*border-bottom: 1px solid #333;*/
      display: block;
    }
    .yiji-a:hover,.erji-ul li:hover{
      background: #FAFBFC;
      color: #4F80FF;
    }
    .yiji-a:hover .erji-ul li{
      color: #333;
    }
    .yiji-a .erji-ul li:hover{
      color: #4F80FF;

    }
    .yiji-a:hover .erji-ul{
      display: block;
    }
    .erji-ul{
      display: none;
      height: 170px;
      overflow-y: scroll;
      min-width: 100px;
      position: absolute;
      left: 111px;
      margin: 0;
      top: 30px;
      padding: 0;
      background: #ffffff;
      border: 1px solid #f1f1f1;
      box-shadow: 1px 1px 1px #eee;
    }
    .erji-ul li{
      list-style: none;
      margin-bottom: 5px;
      padding: 5px 10px;
    }
  </style>
    <div class="first-level mr20" id="dropBtn">
      <span class="mr5" id="pullBtn">沃尔沃XC902</span><i class="icon icon-down"></i>
      <div class="jxs-drop-layer" id="dropLayer">
        <a data-id="0" class="yiji-a">全部</a>
        <a data-id="1" class="yiji-a">沃尔沃XC
          <ul class="erji-ul erji-ul1">
            <li data-two='22'>二级1</li>
            <li data-two='23'>二级2</li>
            <li data-two='24'>二级3</li>
            <li data-two='25'>二级4</li>
             <li data-two='22'>二级1</li>
            <li data-two='23'>二级2</li>
            <li data-two='24'>二级3</li>
            <li data-two='25'>二级4</li>
          </ul>
        </a>
        <a data-id="2" class="yiji-a">沃尔沃903
          <ul class="erji-ul">
            <li data-two='122'>二级11</li>
            <li data-two='123'>二级12</li>
            <li data-two='124'>二级13</li>
            <li data-two='125'>二级14</li>
          </ul>
        </a>
        <a data-id="1" class="yiji-a">沃尔沃XC问问群二群
              <ul class="erji-ul erji-ul1">
                <li data-two='22'>二级1</li>
                <li data-two='23'>二级2</li>
                <li data-two='24'>二级3</li>
                <li data-two='25'>二级4</li>
                 <li data-two='22'>二级1</li>
                <li data-two='23'>二级2</li>
                <li data-two='24'>二级3</li>
                <li data-two='25'>二级4</li>
              </ul>
            </a>
            <a data-id="2" class="yiji-a">沃尔沃9031
              <ul class="erji-ul">
                <li data-two='122'>二级11234</li>
                <li data-two='123'>二级沃尔沃903沃尔沃90312</li>
                <li data-two='124'>二级13</li>
                <li data-two='125'>二级14</li>
              </ul>
            </a>
            <a data-id="2" class="yiji-a">沃尔沃9032
              <ul class="erji-ul">
                <li data-two='122'>二级11··</li>
                <li data-two='123'>二级12</li>
                <li data-two='124'>二级13</li>
                <li data-two='125'>二级14</li>
              </ul>
            </a>
            <a data-id="2" class="yiji-a">沃尔沃9033
              <ul class="erji-ul">
                <li data-two='122'>二级111</li>
                <li data-two='123'>二级12</li>
                <li data-two='124'>二级13</li>
                <li data-two='125'>二级14</li>
              </ul>
            </a>
            <a data-id="2" class="yiji-a">沃尔沃9034
              <ul class="erji-ul">
                <li data-two='122'>二级112</li>
                <li data-two='123'>二级12</li>
                <li data-two='124'>二级13</li>
                <li data-two='125'>二级14</li>
              </ul>
            </a>
            <a data-id="2" class="yiji-a">沃尔沃9035
              <ul class="erji-ul">
                <li data-two='122'>二级114</li>
                <li data-two='123'>二级12</li>
                <li data-two='124'>二级13</li>
                <li data-two='125'>二级14</li>
              </ul>
            </a>
            <a data-id="2" class="yiji-a">沃尔沃9036
              <ul class="erji-ul">
                <li data-two='122'>二级115</li>
                <li data-two='123'>二级12</li>
                <li data-two='124'>二级13</li>
                <li data-two='125'>二级14</li>
              </ul>
            </a>
          </div>
      </div>
    </div>
    <div>
      <li>家科技大富科技啊</li>
      <li>家科技大富科技啊</li>
      <span>机撒谎开发进度</span>
    </div>
    <script>
    // 阻止冒泡
    function stopPop(event){
      var event = event?event:window.event;
      if(event.stopPropagation){
          event.stopPropagation();
      }else{
          event.cancelBubble = true;
      }
    }
    var isShow = false;
    $('#pullBtn').on('click',function(){
      // console.log(this);
      if(!isShow){
        isShow = true;
        $('#dropLayer').show();
        console.log(document.getElementById('dropLayer').offsetWidth)
          console.log(document.getElementById('dropLayer').clientWidth)
          $('.erji-ul').css('left',document.getElementById('dropLayer').clientWidth+'px')
        // $('#dropLayer a').on('mouseover',function(){
        //   $(this).children().show()
        // }).on('mouseout',function(){
        //   $(this).children().hide()
        // })
      }else{
        isShow = false;
        $('#dropLayer').hide();
      }
    })
    $('#dropLayer a').on('click',function(){
      isShow = false;
      $('#dropLayer').hide();
      $('#pullBtn').text(this.childNodes[0].data);
      // console.log(this.childNodes[0].data)
    })
    $('#dropLayer a ul li').on('click',function(event){
      stopPop(event);
      isShow = false;
      $('#dropLayer').hide();
      $('#pullBtn').text($(this).text());
      console.log($(this).text());
    })
    </script>
  </div>
</body>
</html>